<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/swiper.min.css">
    <link rel="stylesheet" href="./css/index1.css">
    <title>黑马页面</title>
</head>
<body>
    <section class="wrap">
    <!-- 头部 -->
    <header class="header">黑马页面</header>
    <nav class="nav">
        <a href="#"class="item">
            <img src="/images1/nav1.jpg" alt="">
            <span>HR面试</span>
        </a>
        <a href="#"class="item">
            <img src="/images1/nav2.jpg" alt="">
            <span>笔试</span>
        </a>
        <a href="#"class="item">
            <img src="/images1/nav3.jpg" alt="">
            <span>技术面试</span>
        </a>
        <a href="#"class="item">
            <img src="/images1/nav4.jpg" alt="">
            <span>模拟面试 </span>
        </a>
        <a href="#"class="item">
            <img src="/images1/nav5.jpg" alt="">
            <span>面试技巧</span>
        </a>
        <a href="#"class="item">
            <img src="/images1/nav7.jpg" alt="">
            <span>薪资查询</span>
        </a>
    </nav>
    <!-- go部分呢 -->
    <img src="./images1/pp1.jpg" alt="" class="go">
</section>
<!-- 就业指导部分 -->
<section class="content">
<div class="con-hd">
    <h4>
        <span><img src="./images1/nav7.jpg" alt="" class="icon"></span>
        就业指导
    </h4>
    <a href="#" class="more">更多>></a>
</div>
<!-- 轮播图部分 -->
<div class="get_bd_cn">
    <div class="swiper-container get_jb">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
              <a href="#">
                  <img src="./images1/nav5.jpg" alt="">
              </a>
              <p>指导你升学成功，go go go</p>
          </div>
          <div class="swiper-slide">
            <a href="#">
                <img src="./images1/nav7.jpg" alt="">
            </a>
            <p>被骗了吧，哈哈哈哈</p>
        </div>
        <div class="swiper-slide">
            <a href="#">
                <img src="./images1/nav6.jpg" alt="">
            </a>
            <p>你怎么这么憨，还被骗了</p>
        </div>
         
        </div>
       
    </div>
       <!-- 添加左右箭头 -->
       <div class="swiper-button-next"></div>
       <div class="swiper-button-prev"></div>
</div>
</section>
<!-- 充电学习部分 -->
<section class="content">
    <div class="con-hd">
        <h4>
            <span><img src="./images1/nav7.jpg" alt="" class="icon"></span>
            充电学习
        </h4>
        <a href="#" class="more">更多>></a>
    </div>
    <!-- 轮播图部分 -->
    <div class="study study-icon">
        <div class="swiper-container study_jd">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                  <img src="./images1/p1.jpg" alt="">
                  <h5>欢迎来到憨批的憨憨,让你越变越憨</h5>
                  <p>一个憨憨来了</p>
              </div>
              <div class="swiper-slide">
                <img src="./images1/p4.gif" alt="">
                <h5>欢迎来学习js,让你越学越废</h5>
                <p>156人在学习了</p>
            </div>
            <div class="swiper-slide">
                <img src="./images1/p6.jpg" alt="">
                <h5>怎么被我骗来了啊,你个憨憨</h5>
                <p>一个憨憨被骗了了</p>
            </div>
            <div class="swiper-slide">
                <img src="./images1/p2.jpg" alt="">
                <h5>叫你别翻了，你的手怎么不听话呀</h5>
                <p>一个憨憨</p>
            </div>
            <div class="swiper-slide">
                <img src="./images1/p3.jpg" alt="">
                <h5>真不听话，憨憨</h5>
                <p>憨憨本憨</p>
            </div>
              
            </div>
    </div>
           <!-- 添加左右箭头 -->
          
    </div>
    <!-- 底部部分 -->
    <footer class="footer">
        <a href="#" class="item">
            <img src="./images1/pic1.png" alt="">
            <p>首页</p>
        </a>
        <a href="#" class="item">
            <img src="./images1/pic2.png" alt="">
            <p>个人</p>
        </a>
        <a href="#" class="item">
            <img src="./images1/pic3.png" alt="">
            <p>中心</p>
        </a>
        <a href="#" class="item">
            <img src="./images1/pic4.png" alt="">
            <p>憨憨</p>
        </a>
    </footer>
    </section>
    <script src="./js/flexible.js"> </script>
    <script src="./js/swiper.min.js"></script>
    <script>
        (function(){
            var swiper = new Swiper('.get_jb', {
                // 能够显示的个数
          slidesPerView: 2,
        //   slider之间的距离
          spaceBetween: 30,
        //   中间那个图片是否居中显示
          centeredSlides: true,
          loop: true,
          navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
        });
        })();
        (function(){
            var swiper = new Swiper('.study_jd', {
            slidesPerView: 2.2,
            spaceBetween: 20,
            
          });
        })();
        
      </script>
</body>
</html>